<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title> - 基本图库</title>
		<meta name="keywords" content="">
		<meta name="description" content="">

		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
		<link href="css/animate.css" rel="stylesheet">
		<link href="css/style.css?v=4.1.0" rel="stylesheet">
		<!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
	</head>
	<body class="gray-bg">
		<div class="wrapper wrapper-content">
		  <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">      
                    <div class="ibox-content">
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                                <tr>
                                    <th>角色名称</th>
                                    <th>描述</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="gradeX">
                                    <td>Trident</td>
                                    <td>Internet Explorer 4.0
                                    </td>
                                    <td class="center ">
										<div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-action">
											<a class="glyphicon glyphicon-pencil" title="修改" href="javascript:void(0);" onclick="" data-toggle="modal" data-target="#myModal4"></a>
											<button class="btn btn-default delet_btn" onclick="remove()">删除</button>
										</div>
									</td>
                                </tr>
                                <tr class="gradeC">
                                    <td>Trident</td>
                                    <td>Internet Explorer 5.0
                                    </td>
                                    <td class="center ">
										<div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-action">
											<a class="glyphicon glyphicon-pencil" title="修改" href="javascript:void(0);" onclick="" data-toggle="modal" data-target="#myModal4"></a>
											<button class="btn btn-default delet_btn" onclick="remove()">删除</button>
										</div>
									</td>
                                </tr>
                                <tr class="gradeA">
                                    <td>Trident</td>
                                    <td>Internet Explorer 5.5
                                    </td>
                                    <td class="center ">
										<div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-action">
											<a class="glyphicon glyphicon-pencil" title="修改" href="javascript:void(0);" onclick="" data-toggle="modal" data-target="#myModal4"></a>
											<button class="btn btn-default delet_btn" onclick="remove()">删除</button>
										</div>
									</td>
                                </tr>
                                <tr class="gradeA">
                                    <td>Trident</td>
                                    <td>Internet Explorer 6
                                    </td>
                                    <td class="center ">
										<div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-action">
											<a class="glyphicon glyphicon-pencil" title="修改" href="javascript:void(0);" onclick="" data-toggle="modal" data-target="#myModal4"></a>
											<button class="btn btn-default delet_btn" onclick="remove()">删除</button>
										</div>
									</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
  

		
		</div>
		<div class="modal inmodal" id="myModal4" ta	bindex="-1" role="dialog" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content animated fadeIn">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
							<h4 class="modal-title">编辑资料</h4>
						</div>
						<div class="modal-body">
							<form method="get" class="form-horizontal">
								<div class="form-group">
									<label class="col-sm-3 control-label">角色名称：</label>

									<div class="col-sm-9">
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">描述：</label>

									<div class="col-sm-9">
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">权限选择：</label>

									<div class="col-sm-9">
										<div class="checkbox">
	                                        <label><input type="checkbox" value="">超级管理员</label>
	                                    </div>
	                                    <div class="checkbox">
	                                        <label><input type="checkbox" value="">商品管理权限</label>
	                                    </div>
	                                    <div class="checkbox">
	                                        <label><input type="checkbox" value="">订单管理权限</label>
	                                    </div>
	                                    <div class="checkbox">
	                                        <label><input type="checkbox" value="">库管权限</label>
	                                    </div>
	                                    <div class="checkbox">
	                                        <label><input type="checkbox" value="">财务权限</label>
	                                    </div>
	                                     <div class="checkbox">
	                                        <label><input type="checkbox" value="">客服权限</label>
	                                    </div>
									</div>
								</div>
								
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-white" >保存</button>
							<button type="button" class="btn btn-primary">还原</button>
						</div>
					</div>
				</div>
			</div>
		
		<!-- 全局js -->
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>

		<!-- Peity -->
		<script src="js/plugins/peity/jquery.peity.min.js"></script>

		<!-- 自定义js -->
		<script src="js/content.js?v=1.0.0"></script>

		<!-- Fancy box -->
		<script src="js/plugins/fancybox/jquery.fancybox.js"></script>

    <!-- Data Tables -->
    <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
            $('.dataTables-example').dataTable();
            /* Init DataTables */
            var oTable = $('#editable').dataTable();
            /* Apply the jEditable handlers to the table */
            oTable.$('td').editable('../example_ajax.php', {
                "callback": function (sValue, y) {
                    var aPos = oTable.fnGetPosition(this);
                    oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                },
                "submitdata": function (value, settings) {
                    return {
                        "row_id": this.parentNode.getAttribute('id'),
                        "column": oTable.fnGetPosition(this)[2]
                    };
                },
                "width": "90%",
                "height": "100%"
            });
        });
        function fnClickAddRow() {
            $('#editable').dataTable().fnAddData([
                "Custom row",
                "New row",
                "New row",
                "New row",
                "New row"]);

        }
    </script>
<script type="text/javascript">
		   $('.ibox-content').on('click','.delet_btn',function(){
		   	$(this).parents('tr').remove();
		   })
</script>
		<script>
			$(document).ready(function() {
				$('.fancybox').fancybox({
					openEffect: 'none',
					closeEffect: 'none'
				});
			});
		</script>

	</body>

</html>